<template>
  <div
    class="w-[350px] border border-gray-200 bg-white p-3 shadow-md rounded-lg"
    @click="openDrawer"
  >
    <div class="flex flex-col gap-y-4">
      <div class="flex justify-between">
        <div class="flex items-center gap-x-2">
          <img
            src="~@/assets/images/icon_Start.png"
            class="w-6 h-6"
            alt="Start icon"
          />
          <div class="flex flex-col gap-y-1">
            <p class="text-lg font-semibold text-black">开始</p>
          </div>
        </div>
      </div>

      <CommonDisplayModule
        title="输入"
        :valueList="data?.inoutlist"
      />
    </div>
    <Handle type="source" :position="Position.Right" />
  </div>
  <StartDrawerModule
    ref="startDrawerRef"
    :form="data"
    @add="handleClickAddBtn"
    @remove="handleClickDeleteBtn"
    @cancel="onCancel"
  />
</template>
<script setup>
import { ref } from 'vue';
import { Handle, Position, useNode } from '@vue-flow/core';
import { editNode } from '@/api/modules/flow';
import StartDrawerModule from '../modules/start-drawer-module.vue';
import CommonDisplayModule from '../modules/common-display-module.vue';
defineProps()
const node = useNode();
const data = ref({
  ...node.node.data,
  inoutlist: node.node.data?.inoutlist || [],
});

const startDrawerRef = ref(null);
const openDrawer = () => {
  startDrawerRef.value?.init();
};

function handleClickAddBtn() {
  data.value.inoutlist.push({
    varname: '',
    vartype: 'String',
    defaultval: '',
    vardesc: '',
    isrequired: false,
  });
  node.node.data = {
    ...node.node.data,
  };
}

function handleClickDeleteBtn(index) {
  data.value.inoutlist.splice(index, 1);
  node.node.data = {
    ...node.node.data,
  };
}

const onCancel = async () => {
  await editNode({
    data: { id: node.id, inoutlist: data.value.inoutlist},
  });
};
</script>
<style lang="scss"></style>
